import React, { Component } from 'react';
import '../styles/UserAddress.scss'
import { IndexBar, NavBar, Toast ,Empty} from 'antd-mobile'
import * as service from '../api/index'

class UserAdress extends Component {
    constructor(props) {
        super(props)
        this.state = {
               addresslist:[],
               disable:null,
            
        }
    }

    back() {
        this.props.history.goBack()
    }
    GoAddaddress() {
        this.props.history.push('/addaddress')
    }
    async componentDidMount() {
          if (this.props.location.state.status==0){//从确认订单页面跳转过来
               this.setState({disable:false})
          }else if( this.props.location.state.status==1 ){//从我的页面跳转过来
             this.setState({disable:true})
          }
        var res = await service.address_list({ userid: localStorage.getItem('userid') })
        this.setState({addresslist:res.data.data})

    }
    async  deladdress(item){//删除地址
         await service.address_delete({ addressid: item.addressid })
         var res = await service.address_list({ userid: localStorage.getItem('userid') })
         this.setState({addresslist:res.data.data})
    }
    Goeditaddress(item){//去修改地址页面
        this.props.history.push({pathname:'/EditAddress',state:{item:item}})
    }
     async goConfirmOrder(item){
         var res = await  service.order_updateOrderAddress(
             {addressid:item.addressid,
             userid:localStorage.getItem('userid'),
             name:item.name,tel:item.tel,
             province:item.province,
             city:item.city,
             county:item.county,
             addressDetail:item.addressDetail,
             time:this.props.location.state.time
            } )
       this.props.history.go(-1)
    }
    render() {
        return (
            <div className='useraddress' >
                <div className="top">
                    <NavBar onBack={() => { this.back() }}>地址列表</NavBar>
                </div>
                {
                    this.state.addresslist.length != 0 ?
                    <div className="useradd_main">
                    {
                        this.state.addresslist.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <input type="checkbox" disabled={this.state.disable}  onChange={()=>{this.goConfirmOrder(item)}} />
                                    <div className="item_middle" >
                                        <div className="text">
                                            <span className='name' >{item.name}</span>
                                            <span className='phone' > {item.tel}</span>
                                            {
                                                item.isDefault == true ?
                                                <span className='default' >默认</span>
                                                :
                                                <span></span>
                                            }
                                        </div>
                                        <div className="address">
                                            {item.province +'   '+ item.city +'    '+ item.county +'   '+item.addressDetail}
                                        </div>
                                    </div>
                                    <div className="button">
                                        <span className='iconfont icon-shanchu'  onClick={()=>{this.deladdress(item)}} ></span>
                                        <span className='iconfont icon-gengduoquyuanquan'  onClick={()=>{this.Goeditaddress(item)}} ></span>
                                    </div>
                                </div>
                            )
                        })
                    }
                    
                   </div>:
                   <div className='useradd_main' >
                     <Empty description='比还没有添加地址'
                           style={{ padding: '64px 0' ,backgroundColor:'white'}}
                           imageStyle={{ width: 128 }}
                           />
                   </div>
                }
                <div className="useradd_footer">
                    <div className="address" onClick={() => { this.GoAddaddress() }} >
                        新增地址
                    </div>
                </div>

            </div>
        );
    }
}

export default UserAdress;